﻿@{
    ViewBag.Title = "Albums";
}


<h2>Albums</h2>

@Html.Partial("Styles")
@Html.Partial("Script")



@{
    int count = 0;
    int COLUMN_SIZE = 2;
}

<div align="center" style="overflow:auto">
    <table>
      <col width="350px">
      <col width="200px">

        <tr>
        @for (int i = 0; i < ViewBag.albums.Count; i++)
        {
            <td>
                <img src="../Content/Image/emeil.jpg" style="height: 200px" onclick="ViewAlbum(@ViewBag.albums[i].ID)">
                <br /><b>@ViewBag.albums[i].Title</b>
                <br />$@ViewBag.albums[i].Price
                <br />
                @if (ViewBag.type == "Y") //ADMIN
                {
                    <input type="button" value ="Edit" onclick="EditAlbum(@ViewBag.albums[i].ID)" />
                    <input type="button" value ="Delete" onclick="DeleteAlbum(@ViewBag.albums[i].ID)"/>
                    
                }
                <br />
                <br />&nbsp
            </td>
                if (++count % COLUMN_SIZE == 0)
                {                     
                @:</tr> 
                @:<tr> 
                }

        }
        </tr>

    </table>
</div>









<script>
    function DeleteAlbum(ID)
    { 
        XMLhttpDeleteAlbum = new XMLHttpRequest();
        XMLhttpDeleteAlbum.open("POST", "/Products/DeleteAlbumAjax", true);
        XMLhttpDeleteAlbum.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpDeleteAlbum.onreadystatechange = reqReadyDeleteAlbum;
        sendStrDeleteAlbum = "albumID=" + ID;
        XMLhttpDeleteAlbum.send(sendStrDeleteAlbum);
    }
    function reqReadyDeleteAlbum() {
        if (XMLhttpDeleteAlbum.readyState == 4 && XMLhttpDeleteAlbum.status == 200) {
            alert(XMLhttpDeleteAlbum.response);
            document.getElementById("refresh").click();

        } else if (XMLhttpDeleteAlbum.readyState == 4) {
            alert("error! code: " + XMLhttpDeleteAlbum.status);

        }
    }

</script>

<form action="/Products/Albums" method="post">
    <input type="submit" id="refresh" hidden="hidden"/>
</form>

